const data = {
  text: "hello world",
  name: "nine",
};

// 用一个全局变量存储被注册的副作用函数
let activeEffect;
// effect函数用于注册副作用函数
function effect(fn) {
  // 调用effect注册副作用函数时，将副作用函数fn赋值给activeEffect
  activeEffect = fn;
  // 执行副作用函数
  fn();
}

const bucket = new WeakMap();

// 代理对象
const obj = new Proxy(data, {
  // 拦截读取操作
  get(target, key) {
    debugger;
    // 如果没有activeEffect直接return
    if (!activeEffect) return target[key];
    // 根据target从存储副作用函数的桶中取出depsMap，它是一个Map类型数据：key --> effects
    let depsMap = bucket.get(target);
    // 如果不存在depsMap，就新建一个Map与target相关联
    if (!depsMap) {
      bucket.set(target, (depsMap = new Map()));
    }
    // 再根据key从depsMap中取得deps，它是一个Set类型，里面存储着所有与当前key相关联的副作用函数effects
    let deps = depsMap.get(key);
    // 如果deps不存在，同样新建一个Set并与key相关联
    if (!deps) {
      depsMap.set(key, (deps = new Set()));
    }
    // 最后将当前激活的副作用函数添加到桶里
    deps.add(activeEffect);
    // 返回属性值
    return target[key];
  },
  // 拦截设置操作
  set(target, key, newVal) {
    // 设置属性值
    target[key] = newVal;
    // 根据target从桶中取出depsMap,他是key --> effects
    const depsMap = bucket.get(target);
    if (!depsMap) return;
    // 根据key获取所有的副作用函数effects
    const effects = depsMap.get(key);
    // 执行副作用函数
    effects && effects.forEach((fn) => fn());
  },
});

effect(() => {
  document.title = obj.text;
  console.log("about text effect执行:");
});

effect(() => {
  document.body.innerText = obj.name;
  console.log("about name effect执行:");
});
